<template>
  <div>
    <Button @click="toggleShowHelpBox">打开帮助框Demo</Button>
    &nbsp;&nbsp;
    <span>{{ result }}</span>
    <HelpBox
      v-model="helpBoxShow"
      :columns="helpBoxColumns"
      :multiSelect="true"
      :rowKey="rowKey"
      :rowName="rowName"
      :selectedKey="selectedKey"
      :title="helpBoxTitle"
      :url="helpBoxUrl"
      :width="900"
      @onOk="helpBoxSelectHandler"
    >
    </HelpBox>
  </div>
</template>

<script>
import HelpBox from "@/components/helpbox";

export default {
  name: "helpbox-demo",
  components: {
    HelpBox,
  },
  data() {
    return {
      helpBoxShow: false,
      helpBoxUrl: '/system/loginlog/listForPagingTable',
      helpBoxColumns: [
        {
          title: '日志ID',
          key: 'logId'
        },
        {
          title: '登录IP',
          key: 'ip'
        },
        {
          title: '登录账户',
          key: 'account'
        },
        {
          title: '登录描述',
          key: 'descript'
        }
      ],
      helpBoxTitle: "选择框DEMO",
      rowKey: 'logId',
      rowName: 'logId',
      checkedArray: [],
      selectedKey: [],
      result: "",
    };
  },
  methods: {
    toggleShowHelpBox() {
      this.selectedKey = this.checkedArray;
      this.helpBoxShow = !this.helpBoxShow;
    },
    helpBoxSelectHandler(data) {
      let arr = [];
      if (data && data.length > 0) {
        this.checkedArray = data;
        for (let i = 0; i < data.length; i++) {
          arr.push(data[i].logId)
        }
      }
      this.result = arr.join(",")
    }
  },
};
</script>

<style scoped>
</style>
